<template>
	<div class="new">
		<h1 class="title">最新音乐</h1>
		<div class="music-content">
			<div class="music-item" v-for="(item, index) in info" :key="item.id" @click="play(item)">
				<div class="rank">
					<span>{{index+1>=10?index+1:'0'+parseInt(+index+1)}}</span>
				</div>
				<div class="content">
					<img v-lazy="item.picUrl" />
					<div class="info">
						<p class="name">
							{{item.name}}
							<span class="dsj">{{item.song.alias[0]?(item.song.alias[0]):''}}</span>
						</p>
						<span class="author">{{item.song.artists[0].name}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Vue from "vue";
	export default {
		data() {
			return {
				info: []
			};
		},
		mounted() {
			this.$api.newsong().then(res => (this.info = res));
		},
		methods: {
			play(item) { 
				let { name , id } = item;
				let { duration , artists } = item.song;

				let playlist = {
					songName: name,
					id,
					name: artists[0].name,
					time: Vue.options.filters.durationToTime(duration)
				}; 
				this.$store.commit("addPlayList", playlist);
				this.$store.commit("play", id);
 
			}
		}
	};
</script>
<style lang="less">
	.new {
		margin-top: 80px;

		.music-content {
			border: 1px solid #ededed;
			border-right: none;
			height: 303px;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			margin-top: 10px;

			.music-item {
				width: 50%;
				height: 60px;
				display: flex;
				align-items: center;
				margin-top: 0;
				border-right: 1px solid #ededed;

				&:hover {
					background-color: #ebeced;
				}

				&:nth-child(2),
				&:nth-child(4),
				&:nth-child(7),
				&:nth-child(9) {
					background-color: #f5f5f7;
				}

				.rank {
					width: 10%;
					text-align: center;
					color: #a399ae;
					font-size: 13px;
				}

				.content {
					display: flex;

					.info {
						margin-left: 10px;
						margin-top: 2px;
						width: 80%;
						overflow: hidden;

						.name {
							font-size: 13px;

							.dsj {
								color: #a399ae;
							}
						}

						.author {
							font-size: 13px;
							color: #a399ae;
						}
					}

					img {
						width: 50px;
						height: 50px;
					}
				}
			}
		}

	}
</style>
